27 Februari 2024
Pada membuat user interface. Seorang UI/UX Designer tidak langsung membuat di Figma.
Alasannya:Insight adalah nilai yang diperoleh dari analisis data secara kualitatif atau kuantitaif yang berisi pola dan tren.
Insight dapat digunakan untuk membuat keputusan yang lebih tepat.
Insighhts:Sketching adalah proses membuat fitur produk pada kertas. Tujuannya untuk mengkomunikasikan ide-ide produk kepada tim.
Selain itu:Wireframing adalah membuat kerangka dasar website atau aplikasi. Wireframe dibuat sebelum masuk ke desain yang lebih nyata.
Wireframe menunjukkan:Komponen adalah elemen visual yang membentuk layout dari user interface. Komponen dapat digunakan berulang-ulang dalam berbagai bagian produk baik aplikasi dan/atau website.
Contohnya:User flow adalah serangkaian langkah yang harus dilakukan pengguna untuk menyelesaikan tugas di situs web atau aplikasi.
User flow juga dapat diartikan sebagai alur pengguna.
Mockup adalah rancangan desain yang akan diterapkan pada produk. Dalam UI/UX desain, mockup meliputi elemen tampilan visual, warna, tipografi, dan navigasi.
Manfaat:Prototype adalah simulasi produk akhir untuk menguji alur produk sebelum peluncuran.
Peran penting prototype:Rule of 8 adalah prinsip untuk menentukan jarak antara elemen-elemen desain.
Tujuannya:Rule of 8 biasanya digunakan oleh Google, Apple dan Bootstrap
Auto Layout adalah fitur yang membuat desain menjadi dinamis. Fungsinya membuat desain responsif untuk web dan aplikasi.
Manfaat auto layout:Local styles adalah styles pada file saat ini.
Kelebihan menggunakan local style:Text atau typography adalah salah satu elemen dasar dari local style, selain mendukung accessibility dan content readability, text ini bisa bisa jadi penentu tone dari product akhir yang akan dibuat.
Biasanya text dalam local style terdiri dari kombinasi 2 jenis font yang istilahnya biasa disebut font pairing
Ini adalah text scaling dari Material UI yang memiliki skala tipografi yang terdefinisi dengan baik.
Ini berarti teks yang digunakan dalam desain harus mengikuti skala tipografi yang konsisten untuk memastikan tampilan yang rapi dan mudah dibaca.
Colors juga merupakan salah satu elemen dasar dari local style, Fungsi dari color itu sendiri adalah untuk menciptakan “Identitas” dan juga tone dari brand produk digital kita.
Biasanya colors dibagi menjadi primary secondary, lalu accent yang bisa merupakan semantic color, grayscale color dll.
Grid adalah grid panduan dalam mengatur teks dan gambar yang terdiri dari garis vertikal dan horizontal sehingga membuat format kolom dan margin
Effect yang bisa dijadikan local style. Effect ini bentuknya bisa bermacam macam mulai dari shadow hingga blur.
Plugins adalah aplikasi yang dibuat oleh Community yang berfungsi untuk menambahkan fitur pada figma. Plugin berjalan di dalam file, melakukan satu atau lebih action pengguna, dan memungkinkan pengguna untuk menyesuaikan pengalaman mereka atau membuat alur kerja yang lebih efisien.
Design system adalah seperangkat aturan, pedoman, komponen, dan sumber daya desain yang diatur sedemikian rupa untuk memastikan konsistensi dalam desain visual dan interaksi antara pengguna dan produk.
Kelebihan menggunakan Design System
Material Design adalah design system yang dikembangkan oleh Google untuk membantu mengembangkan produk yang lebih menarik secara visual dan lebih mudah digunakan oleh pengguna.
Polaris adalah sistem desain untuk admin Shopify. Polaris menyediakan panduan dan design system, dan ikon untuk membangun aplikasi di admin Shopify.
Apple Human Interface Guidelines (HIG) adalah sekumpulan prinsip dan design system untuk membuat aplikasi dan antarmuka pengguna untuk platform Apple. Ini mencakup iOS, macOS, watchOS, dan tvOS
Carbon Design System adalah design system untuk produk dan pengalaman digital IBM. Sistem ini terdiri dari serangkaian gaya, komponen, dan pedoman yang digunakan untuk membuat UI yang terpadu.